<template>
  <div class="yuetai">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">月台管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_yuetai_add')!==-1">新增月台</el-button>
      </div>
      <s-table
        :table="table"

        @http="tableWatch">
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="月台名称" prop="ytmc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_ytmc"
                        placeholder="月台名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="是否发货" prop="fhbj">
              <el-select v-model="autoVue_table_fhbj"
                         placeholder="是否发货">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  label="未发货"
                  value="0"></el-option>
                <el-option
                  label="已发货"
                  value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="是否收货" prop="shbj">
              <el-select v-model="autoVue_table_shbj"
                         placeholder="是否收货">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  label="未收货"
                  value="0"></el-option>
                <el-option
                  label="已收货"
                  value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="success" size="mini" @click="tableEdit(s.row)" v-if="USER.auth.indexOf('base_yuetai_edit')!==-1">编辑</el-button>
            <el-button type="danger" size="mini" @click="tableDelete(s.row)" v-if="USER.auth.indexOf('base_yuetai_delete')!==-1">删除</el-button>
          </template>
        </el-table-column>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}月台</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="货主名称">
              <div class="s-content">
                <el-tag type="success">{{USER.hz[0]? USER.hz[0].show_hzid : '暂无货主'}}</el-tag>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="ytmc" label="月台名称">
              <el-input
                ref="ytmc"
                type="text"
                v-model="formDialog.ytmc"
                @keyup.enter.native="getytmcFocus(1)"
                placeholder="月台名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="zysw" label="上午作业">
              <el-time-picker
                is-range
                v-model="formDialog.zysw"
                placeholder="上午作业时间">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="zyxw" label="下午作业">
              <el-time-picker
                is-range
                v-model="formDialog.zyxw"
                placeholder="上午作业时间">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="shbj" label="是否允许收货">
              <div class="s-content">
                <el-switch
                  v-model="formDialog.shbj"
                  on-color="#13ce66"
                  on-text="允许"
                  off-text="不许"
                  off-color="#ff4949"
                  on-value="1"
                  off-value="0">
                </el-switch>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="fhbj" label="是否允许发货">
              <div class="s-content">
                <el-switch
                  v-model="formDialog.fhbj"
                  on-color="#13ce66"
                  on-text="允许"
                  off-text="不许"
                  off-color="#ff4949"
                  on-value="1"
                  off-value="0">
                </el-switch>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formDialog.fhbj ==='1'">
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="kwzmc" label="集货区域">
              <el-input
                type="text"
                disabled
                v-model="formDialog.kwzmc"
                placeholder="集货区域"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="区域查询">
              <div class="s-content">
                <el-button type="info" icon="search" @click="dialogSelectOpen()"></el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave" type="info">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogSelect" :close="dialogSelectInit">
      <el-form>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="查询名称" prop="mc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableSelect_mc"
                        placeholder="库位组名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="查询描述" prop="ms">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_tableSelect_ms"
                        placeholder="库位组描述" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <s-table
        :multiSelect="true"
        :control="false"
        :expand="false"
        :table="tableSelect"
        ref="tableSelect"
        @http="tableWatch">
      </s-table>
      <el-button slot="footer" @click="dialogSelectSave" type="info">确认</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';
  function __form () {
    return {
      hzmc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      ytmc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      shbj: { value: '1', rule: [ 'vNull' ], cRemarks: '0不允许 1允许' },
      fhbj: { value: '1', rule: [ 'vNull' ], cRemarks: '0不允许 1允许' },
      kwzmc: { value: '', rule: [ 'vNull__change' ], cRemarks: '' },
      zysw: { value: [], type: 'dateRange', rule: [ 'vNull__change' ], cRemarks: '' },
      zyxw: { value: [], type: 'dateRange', rule: [ 'vNull__change' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'base_yuetai-FEcarWms',
    head: {
      'title': '月台管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 月台 查看月台信息' },
      ],
    },
    store: ['USER'],
    data: {
      table: {
        column: [
          { label: '货主名称',
            prop: 'hzmc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '月台名称',
            prop: 'ytmc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '允许收货',
            prop: 'shbj',
            minWidth: '0px',
            cRemarks: '0不允许 1允许',
            formatter: (row, column) => {
              return row[column.property || column] === 0 ? '不允许' : '允许';
            },
            elTag: {
              filterType: function (value) {
                return value === 1 ? 'success' : 'danger';
              },
            },
            search: true },
          { label: '允许发货',
            prop: 'fhbj',
            minWidth: '0px',
            cRemarks: '0不允许 1允许',
            formatter: (row, column) => {
              return row[column.property || column] === 0 ? '不允许' : '允许';
            },
            elTag: {
              filterType: function (value) {
                return value === 1 ? 'success' : 'danger';
              },
            },
            search: true },
          { label: '对应区域',
            prop: 'kwzmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '上午开始',
            prop: 'zyswks',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 11);
            },
            cRemarks: '',
            search: false },
          { label: '上午结束',
            prop: 'zyswjs',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 11);
            },
            cRemarks: '',
            search: false },
          { label: '下午开始',
            prop: 'zyxwks',
            minWidth: '0px',
            cRemarks: '',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 11);
            },
            search: false },
          { label: '下午结束',
            prop: 'zyxwjs',
            minWidth: '0px',
            cRemarks: '',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 11);
            },
            search: false },
        ],
        url: '/wmsrrailwayplatform/list',
        key: 'id',
        tableColumn: 4,
        // Popover 弹出框
        popover: {
          width: 900,
        },
      },
      formDialog: __form(),
      formDialogAdd: __form(),
      dialog: {
        title: '新增',
        row: {},
        dykw: {},
      },
      dialogSelect: {
      },
      dialogAdd: {
        title: '添加',
      },
      tableSelect: {
        column: [
          { label: '库位组名称',
            prop: 'mc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '库位组描述',
            prop: 'ms',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '库位数',
            prop: 'kws',
            minWidth: '0px',
            cRemarks: '',
            search: false },
        ],
        tableColumn: 3,
        url: '/wmsrrailwayplatform/kwzSelectPage',
      },
    },
    transition: 'slide-fade',
    methods: {
      getytmcFocus (len) {
        const DOM = event.path[6][len];
        DOM.focus();
      },
      dialogInit () {
        this.dialog.row = {};
        this.dialog.dialog = '';
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          break;
        case 'PUT':
          this.dialog.row = more;
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          let step = Object.assign({}, more);
          this.formDialog.zysw = [new Date(step.zyswks), new Date(step.zyswjs)];
          this.formDialog.zyxw = [new Date(step.zyxwks), new Date(step.zyxwjs)];
          break;
        }
        this.dialog.visible = true;
        setTimeout(() => {
          this.$refs.ytmc.$el.children[0].focus();
        }, 100);
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            option.fhbj = parseInt(option.shbj);
            option.shbj = parseInt(option.shbj);
            if (this.formDialog.zysw[1].getTime() > this.formDialog.zyxw[0].getTime()) {
              return this.$alert('上午结束时间 不能大于 下午开始时间！', '提示');
            }
            delete option.kwzmc;
            if (this.formDialog.fhbj === '1') {
              option.dykwzid = this.dialog.dykw.id;
            }
            try {
              await this.post('/wmsrrailwayplatform/add', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            if (this.formDialog.zysw[1].getTime() > this.formDialog.zyxw[0].getTime()) {
              return this.$alert('上午结束时间 不能大于 下午开始时间！', '提示');
            }
            try {
              option.id = this.dialog.row.id;
              option.dykwzid = this.dialog.dykw.id || option.dykwzid;
              delete option.kwzmc;
              await this.post('/wmsrrailwayplatform/baseUpdateByPrimaryKeySelective', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      tableDelete (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将删除选择的数据', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmsrrailwayplatform/baseDeleteBathPrimaryKeys/', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },

      dialogSelectInit () {
        this.tableClear('tableSelect');
      },
      dialogSelectOpen () {
        this.dialogSelect.visible = true;
        this.tableWatch('tableSelect');
      },
      dialogSelectSave () {
        if (this.tableSelect.multipleSelection.length !== 1) {
          this.$alert('请选择1个库位组', '提示');
        } else {
          this.dialog.dykw = this.tableSelect.multipleSelection[0];
          this.formDialog.kwzmc = this.dialog.dykw.mc;
          this.dialogSelectInit();
          this.dialogSelect.visible = false;
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .yuetai{
    width: 88vw;
    float: left;
  }
</style>
